<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title>登录页面</title>
    <style>
        body {
            margin: 0; /*去掉自带的外边距*/
            text-align: center;
            background-color: #7fb0f2;
        }

        h1 {
            font-size: 72px;
            margin-bottom: 0;
            color: black;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>欢迎使用XX系统</h1>
    <el-card
            style="border-radius: 10px;width: 600px;height: 450px;margin:50px auto;background-color: rgba(255,255,255,0.3);position:relative;">
        <h2>xx系统用户登录</h2>
        <el-form :model="user" :phones="phones" :rules="rules" ref="user" label-width="60px" style="width:400px;margin:50px auto;">
            <!--密码登录表-->
            <el-form-item label="账号" v-if="isVisible>=3" prop="username" style="margin-bottom: 40px;">
                <el-input type="text" placeholder="请输入用户名" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" v-if="isVisible>=3">
                <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
            </el-form-item>
            <!--手机登陆表-->
            <el-form-item label="" prop="phone" v-else-if="isVisible>=2" style="margin-left: -60px;margin-top: -35px">
                <h2 style="text-align: center">手机登录</h2>
                <el-input type="text" placeholder="请输入手机号" v-model="phones.phone" maxlength="11" show-word-limit>
                    <template slot="prepend">+86</template>
                </el-input>
                <el-form-item label="" prop="code" style="margin-top: 20px">
                    <el-input type="text" placeholder="请输入验证码" v-model="phones.code">
                        <el-button slot="append" type="primary" @click="">获取验证码</el-button>
                    </el-input>
                </el-form-item>
            </el-form-item>
            <!--二维码登录表-->
            <el-form-item label="" v-else>
                <el-card style="position:absolute;width: 260px ;height: 200px;top: -40px;left: 10px">
                    <img src="ewm.jpg" style="width: 130px;height: 130px" alt="">
                    <p style="text-align: center;position: relative;bottom: 20px"><b>请扫码登录</b></p>
                </el-card>
            </el-form-item>
            <!--按钮-->
            <el-row gutter="10" style="position:absolute;bottom:120px;margin:0 auto;text-align: center;left:20%">
                <el-col span="5">
                    <el-button type="primary" @click="login()">登录</el-button>
                </el-col>
                <el-col span="5">
                    <el-button type="primary" @click="location.href='reg.html'">注册</el-button>
                </el-col>
                <el-col span="7">
                    <el-button type="primary" @click="pLogin()">手机登录
                    </el-button>
                </el-col>
                <el-col span="7">
                    <el-button type="primary" @click="cLogin()">
                        扫码登陆
                    </el-button>
                </el-col>
            </el-row>
            <el-form style="position: absolute;bottom: 80px;left: 200px">
                <el-checkbox v-model="radio" label="1">记住我</el-checkbox>
                <el-checkbox v-model="checked">已经阅读并同意<a href="">相关协议</a></el-checkbox>
            </el-form>
        </el-form>
    </el-card>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {username: "", password: ""},
                phones: {phone: "", code: ""},
                radio: true,
                checked: false,
                isVisible: 3,
                phoneLogin: "手机登录",
                codeLogin: "扫码登录",
                rules: {
                    username: [{required: true, message: "请输入用户名", trigger: "blur"},
                        {min: 3, max: 15, message: "长度在3到15个字符", trigger: "blur"}],
                    password: [{required: true, message: "请输入密码", trigger: "blur"},
                        {}],
                    phone: [{required: true, message: "请输入手机号", trigger: "blur"},
                        {min: 11, max: 11, message: "请输入正确的手机号格式", trigger: "blur"}],
                    code: [{required: true, message: "请输入验证码", trigger: "blur"},
                        {min: 4, max: 4, message: "验证码错误", trigger: "blur"}
                    ]
                }
            }
        },
        methods: {
            login() {//密码登录

            },
            pLogin() {//手机登录
                if (v.codeLogin === "扫码登录" && v.phoneLogin === "手机登录") {
                    v.phoneLogin = "密码登录";
                    v.isVisible = 2
                    this.$refs['form'].resetFields();
                } else if (v.phoneLogin === "密码登录") {
                    v.phoneLogin = "手机登录";
                    v.isVisible = 3;
                    this.$refs['form'].resetFields();
                }
            },
            cLogin() {//二维码登录
                if (v.phoneLogin === "手机登录" && v.codeLogin === "扫码登录") {
                    v.codeLogin = "密码登录";
                    v.isVisible = 1;
                    this.$refs['form'].resetFields();
                } else if (v.codeLogin === "密码登录") {
                    v.codeLogin = "扫码登录";
                    v.isVisible = 3;
                    this.$refs['form'].resetFields();
                }
            },
        }
    })
</script>
</html>